<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领平台</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="description" content="校园失物招领和寻物平台，帮助师生找回丢失物品或归还捡到的物品">
    <meta name="keywords" content="失物招领,寻物,校园,学生,丢失物品,找回物品">
    <style>
        /* 防止加载闪烁 */
        body {
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header class="header">
        <div class="container">
            <h1>校园失物招领平台</h1>
            <p>让丢失的物品找到回家的路</p>
        </div>
    </header>

        <main class="container main-content">
        <!-- 发布按钮 -->
        <div class="publish-btn-container">
            <button id="publishBtn">发布信息</button>
        </div>

        <!-- 筛选区域 -->
        <section class="filter-section">
            <h2>筛选信息</h2>
            <form id="filterForm" class="filter-form">
                <div class="form-group">
                    <label for="filterType">信息类型</label>
                    <select id="filterType">
                        <option value="">全部类型</option>
                        <option value="lost">寻物启事</option>
                        <option value="found">失物招领</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="filterCategory">物品类别</label>
                    <select id="filterCategory">
                        <option value="">全部类别</option>
                        <option value="证件类">证件类（学生证/饭卡/身份证等）</option>
                        <option value="电子设备">电子设备（手机/平板/耳机等）</option>
                        <option value="背包类">背包类（书包/电脑包/钱包等）</option>
                        <option value="书籍文具">书籍文具（课本/笔记本/文具等）</option>
                        <option value="其他">其他物品</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="filterLocation">地点搜索</label>
                    <input type="text" id="filterLocation" placeholder="输入地点关键词搜索（如：第一教学楼、食堂等）">
                </div>
                <div class="filter-actions">
                    <button type="submit" class="btn-primary">搜索</button>
                    <button type="button" id="resetFilterBtn" class="btn-secondary">重置</button>
                </div>
            </form>
        </section>

            <!-- 帖子列表区域 -->
        <section class="posts-section">
            <h2>最新信息</h2>
            <div id="postsContainer">
                <!-- 帖子卡片会通过JavaScript动态生成 -->
                <div class="loading"></div>
            </div>
        </section>
        </main>
    <!-- 发布信息模态框 -->
    <div id="publishModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>发布信息</h2>
                <button id="closePublishModal" class="close-btn">×</button>
            </div>
            <div class="modal-body">
                <form id="publishForm">
                    <div class="form-check">
                        <input type="radio" id="typeLost" name="postType" value="lost" checked>
                        <label for="typeLost">寻物启事（我丢失了物品）</label>
                    </div>
                    <div class="form-check">
                        <input type="radio" id="typeFound" name="postType" value="found">
                        <label for="typeFound">失物招领（我捡到了物品）</label>
                    </div>
                    
                    <div class="form-title">物品信息</div>
                    
                    <div class="form-group">
                        <label for="postTitle">标题 *</label>
                        <input type="text" id="postTitle" placeholder="请输入标题（如：丢失黑色背包）" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="postCategory">物品类别 *</label>
                        <select id="postCategory" required>
                            <option value="">请选择物品类别</option>
                            <option value="证件类">证件类（学生证/饭卡/身份证等）</option>
                            <option value="电子设备">电子设备（手机/平板/耳机等）</option>
                            <option value="背包类">背包类（书包/电脑包/钱包等）</option>
                            <option value="书籍文具">书籍文具（课本/笔记本/文具等）</option>
                            <option value="其他">其他物品</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="postLocation">丢失/捡到地点 *</label>
                        <input type="text" id="postLocation" placeholder="请输入具体地点（如：第一教学楼3楼、图书馆自习室等）" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="postDescription">详细描述 *</label>
                        <textarea id="postDescription" placeholder="请详细描述物品特征、丢失/捡到时间等信息，这有助于更快找到失主或找回物品。" required></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="postContact">联系方式 *</label>
                        <input type="text" id="postContact" placeholder="请输入手机号码或其他联系方式" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="closePublishBtn" class="btn-secondary" onclick="document.getElementById('closePublishModal').click()">取消</button>
                <button type="button" id="submitPublishBtn" class="btn-primary">发布信息</button>
            </div>
        </div>
    </div>

    <!-- 留言/查看详情模态框 -->
    <div id="messageModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>信息详情</h2>
                <button id="closeMessageModal" class="close-btn">×</button>
            </div>
            <div class="modal-body">
                <div class="message-container">
                    <!-- 帖子详情 -->
                    <div id="postDetail" class="post-detail">
                        <!-- 详情内容会通过JavaScript动态生成 -->
                    </div>
                    
                    <!-- 留言表单和列表 -->
                    <div class="messages-list">
                        <h4>留言交流</h4>
                        <div id="messagesContainer" class="messages-container">
                            <!-- 留言内容会通过JavaScript动态生成 -->
                        </div>
                        
                        <div class="form-title">发送留言</div>
                        <form id="messageForm">
                            <div class="form-group">
                                <label for="messageContent">留言内容 *</label>
                                <textarea id="messageContent" placeholder="请输入您的留言内容" required></textarea>
                            </div>
                            <div class="form-group">
                                <label for="messageContact">您的联系方式 *</label>
                                <input type="text" id="messageContact" placeholder="请输入手机号码或其他联系方式" required>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="closeMessageBtn" class="btn-secondary" onclick="document.getElementById('closeMessageModal').click()">关闭</button>
                <button type="button" id="submitMessageBtn" class="btn-primary">发送留言</button>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer style="text-align: center; padding: 2rem 0; color: #666; font-size: 0.9rem;">
        <div class="container">
            <p>© 2023 校园失物招领平台 - 帮助他人，方便自己</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="script.js"></script>
    
    <!-- 页面加载完成后的初始化 -->
    <script>
        // 确保DOM加载完成后再执行
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，开始初始化应用...');
            // 这里可以添加一些初始化代码，不过主要的初始化逻辑在script.js中
        });
    </script>
</body>
</html>